<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
<!--        **插值表达式: 在原始内容基础上，实现内容拼接，在拼接过程中不解析内容中的html标签 -->
        <b>内容：{{msg}}</b> <br>

<!--        v-text指令：覆盖原始内容，在覆盖过程中不解析内容中的html标签，相当于js中的innerText-->
        <b v-text="msg">内容：</b> <br>

<!--        **v-html指令：覆盖原始内容，在覆盖过程中解析内容中的html标签，相当于js中的innerHTML-->
        <b v-html="msg">内容：</b> <br>

<!--        v-bind:标签的属性名  给标签绑定指定名称的属性  -->
        <a v-bind:href="ahref">白度</a> <br>
<!--        v-bind的简写方式，属性名前面的:一定不要漏掉 -->
        <a :href="ahref">白度</a> <br>

<!--        :value绑定属性时，是单向绑定，模型变化能够体现在视图上，视图数据变化无法体现到模型上-->
        用户名: <input type="text" :value="name">  {{name}} <br>
<!--        v-model针对表单项标签的独有指令，用来绑定value属性的，而且双向绑定，模型变化能够体现在视图上，视图数据变化能够体现到模型上-->
        用户名2: <input type="text" v-model="name">  {{name}} <br>

<!--        v-on:事件名称，绑定指定名称的事件，对应的事件函数必须在vue对象的methods中-->
        <button v-on:click="fun1">改变vue中name属性的值</button>
<!--        @事件名称是 v-on的简写方式-->
        <button @click="fun1">改变vue中name属性的值</button>
        <br>

<!--        控制元素不显示的方式直接不创建元素对象，如果在页面中只是一次性的控制元素的显示与隐藏，建议使用这种方式-->
        <span v-if="score>=90">优秀</span>
        <span v-else-if="score>=80">良好</span>
        <span v-else-if="score>=60">及格</span>
        <span v-else>不及格</span>

        <br>

<!--        控制元素不显示的方式是通过 display样式属性的值为none控制的，如果在页面中频繁切换元素的显示与隐藏，建议使用v-show-->
        <span v-show="score<85">显示</span>

        <hr>
        <table border="1" width="40%">
            <tr>
                <th>id</th>
                <th>uname</th>
                <th>age</th>
                <th>gender</th>
            </tr>

<!--            v-for加在要生成的那个标签上
                    stu 自定义的变量名称，用来接收当前遍历到的列表数据中的元素
                    in 关键字，固定的
                    stus vue对象中列表数据的模型
-->
<!--            <tr v-for="stu in stus">-->
<!--                <td>{{stu.id}}</td>-->
<!--                <td>{{stu.uname}}</td>-->
<!--                <td>{{stu.age}}</td>-->
<!--                <td>{{stu.gender}}</td>-->
<!--            </tr>-->

<!--            idx 自定义的变量名称，用来接收当前遍历到的列表数据中的元素的索引号 0 ，1，2...-->
            <tr v-for="(stu,idx) in stus">
                <td>{{idx+2}}</td>
                <td>{{stu.uname}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>

    </div>

<script>
    // document.getElementById("b1").innerHTML = "hello";
    new Vue({
        //表示当前vue对象托管页面的哪一部分，值是一个 选择器
        el:"#app",
        //表示当前Vue对象的数据模型，将这个模型的内容和页面元素实现绑定
        data:{
            //msg是一个自定义的模型变量，最终和页面元素实现绑定
            msg:"<font color='red'>hello vue...11111</font>",

            ahref:"http://www.1000phone.com",
            name:"zhangsan",
            score:95,
            stus:[
                {id:1,uname:"zs",age:18,gender:"nan"},
                {id:2,uname:"ls",age:19,gender:"nan"},
                {id:3,uname:"ww",age:28,gender:"nv"},
                {id:4,uname:"zl",age:21,gender:"nan"},
                {id:5,uname:"tq",age:21,gender:"nan"},
            ]
        },
        //表示当前vue对象的行为，一般结合事件使用
        methods:{
            fun1(){
                //this表示当前vue对象
                this.name = "lisi"
            }
        }
    });
</script>
</body>
</html>